<template>
  <NstdForm :model="form" label-width="120px">
    <NstdFormItem label="Activity name">
      <NstdInput v-model="form.name" />
    </NstdFormItem>
    <NstdFormItem label="Activity zone">
      <NstdSelect v-model="form.region" placeholder="please select your zone">
        <NstdOption label="Zone one" value="shanghai" />
        <NstdOption label="Zone two" value="beijing" />
      </NstdSelect>
    </NstdFormItem>
    <NstdFormItem label="Activity time">
      <el-col :span="11">
        <NstdDatePicker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <NstdTimePicker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </NstdFormItem>
    <NstdFormItem label="Instant delivery">
      <NstdSwitch v-model="form.delivery"/>
    </NstdFormItem>
    <NstdFormItem label="Activity type">
      <NstdCheckboxGroup v-model="form.type" :options="options1">
      </NstdCheckboxGroup>
    </NstdFormItem>
    <NstdFormItem label="Resources">
      <NstdRadioGrouop v-model="form.resource" :options="options2">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </NstdRadioGrouop>
    </NstdFormItem>
    <NstdFormItem label="Activity form">
      <NstdInput v-model="form.desc" type="textarea" />
    </NstdFormItem>
    <NstdFormItem>
      <NstdButton type="primary" @click="onSubmit">Create</NstdButton>
      <NstdButton>Cancel</NstdButton>
    </NstdFormItem>
  </NstdForm>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const options2 = [
  {
    label: 'Sponsor',
    value: 'Sponsor'
  },
  {
    label: 'Venue',
    value: 'Venue'
  }
]
const options1 = [
  {
    label: 'Online activities',
    value: 'Online activities',
  },
  {
    label: 'Promotion activities',
    value: 'Promotion activities',
  },
  {
    label: 'Offline activities',
    value: 'Offline activities',
  },
  {
    label: 'Simple activities',
    value: 'Simple activities',
  }
]
const options = [
  {
    label: 'Zone one',
    value: 'shanghai'
  },
  {
    label: 'Zone two',
    value: 'beijing'
  }
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {}
</script>
